<template>
  <div class="cite-container">
    <div class="container-left-box" :class="isCollapse?'isCollapse':''">
      <div class="top-icon-box">
        <img v-if="!isCollapse" src="@/assets/images/timg.png" alt="">
        <span class="icon-text">{{ isCollapse ? topName : topText }}</span>
      </div>
      <div class="slider-menu-box">
        <left-menu
          :menuList="menuList"
          :isCollapse="isCollapse"
          @menuAction="menuAction"
        ></left-menu>
      </div>
      <div class="bottom-menu-text">
        <i v-if="!isCollapse" class="el-icon-s-fold" @click="changeCollapse(true)"></i>
        <i v-else class="el-icon-s-unfold" @click="changeCollapse(false)"></i>
      </div>
    </div>
    <div :class="isCollapse?'isCollapse':''" class="container-right-box">
      <router-view />
    </div>
  </div>
</template>
<script>
import LeftMenu from "@/components/public/left-menu";
export default {
  name: "Cite",
  components: {
    'left-menu': LeftMenu
  },
  data() {
    return {
      topName: 'Lion',
      topText: 'Lion-admin'
    };
  },
  computed: {
    isCollapse () {
      return this.$store.getters.collapseState
    },
    menuList () {
      const datas = this.$store.getters.authSysData
      return datas.menu || []
    }
  },
  mounted () {
    this.$store.dispatch('loadAuthSysData')
  },
  methods: {
    changeCollapse (state) {
      this.$store.commit('CHANGE_COLLAPSE', state)
    },
    menuAction (params) {
      if (params) {
        this.$router.push({ path: params })
      }
    }
  }
};
</script>
<style lang="less">
@import url("./less/cite.less");
</style>